<script setup>
import { ElMenu, ElSubMenu, ElMenuItem, ElMenuItemGroup } from 'element-plus';
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
const route = useRoute();
const router = useRouter();
console.log(router, 1);
console.log(route, 5);
const routeArr = ref([]);
routeArr.value = router.options.routes;

</script>

<template>
  <div>
    <template v-for="item in routeArr">
      <router-link :to="item.path">{{ item.name }}</router-link>|
      <template v-for="i in item.children ?? []">
        <router-link :to="i.path">{{ i.name }}</router-link>|
      </template>
    </template>
  </div>
  <div class="main">
    <div class="menu">
      <ElMenu :unique-opened="true" :router="true" mode="horizontal">
        <template v-for="item in router.options.routes">
          <ElSubMenu v-if="item.children" :index="item.path">
            <template #title>{{ item.name }}</template>
            <template v-if="item.children?.length > 0">
              <ElMenuItemGroup>
                <ElMenuItem v-for="child in item.children" :key="child.name" :index="child.path">{{ child.name }}
                </ElMenuItem>
              </ElMenuItemGroup>
            </template>
          </ElSubMenu>
          <ElMenuItem v-else :index="item.path">{{ item.name }}</ElMenuItem>
        </template>
      </ElMenu>
    </div>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<style scoped></style>
